body {
}
/* page demarrage    */
.quizphilo-quiz-background {
    min-height: 100dvh;
    width: 100%;
    background-size: cover;
    margin-top: 25px;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    text-shadow: 4px 3px 0px #fff
}
/* Titres */
.quizphilo-quiz-test h1,
.quizphilo-quiz-test h2 {
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
}

.quizphilo-concept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem; /*16px;*/
    max-width: 100%;
    margin: 40px auto;
    padding: 1rem; /*0 16px;*/
}

.quizphilo-concept-button {
    font-family: 'Segoe UI', sans-serif;
    width: 100%;
    padding: 0.5rem; /*14px 18px;*/
    border: none;
    border-radius: 20px;
    font-size: 1.08rem;
    font-weight: 600;
    color: black;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .quizphilo-concept-button:hover,
    .quizphilo-concept-button:focus-visible {
        filter: brightness(1.15);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
        transform: translateY(-2px);
    }

    .quizphilo-concept-button:active {
        filter: brightness(1.05);
        transform: scale(0.97);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

.domaine-etre {
    background: linear-gradient(135deg, #6a5acd, #8a7dff);
}

.domaine-culture {
    background: linear-gradient(135deg, #ff9800, #ffc107);
}

.domaine-raison-reel {
    background: linear-gradient(135deg, #4caf50, #81c784);
}

.domaine-politique {
    background: linear-gradient(135deg, #e53935, #ef9a9a);
}

.domaine-morale {
    background: linear-gradient(135deg, #009688, #4db6ac);
}



@media (max-width: 480px) {
    .concept-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 12px;
    }
}